<template>
  <div class="container">
    <!-- 标题 -->
    <div class="title">
      <h2 style="color: #f29222">房产经纪 ></h2>
    </div>
    <div class="broker_list">
      <div class="broker_item" v-for="item in brokerList" :key="item.id">
        <div
          class="broker_img"
          :style="{ 'background-image': `url(${item.image || src})` }"
        ></div>
        <div class="broker_info">
          <div class="broker_name">
            <h3>{{ item.name || "匿名经纪" }}</h3>
          </div>
          <div class="broker_intro">
            {{ item.desc || "这个经纪太懒了,什么也没说..." }}
          </div>
          <div class="broker_btn">
            <i class="el-icon-star-off"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAgentList } from "@/api/index";
export default {
  data() {
    return {
      brokerList: [],
      //
      src: "https://img1.baidu.com/it/u=581064947,2700442792&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
      //获取经纪列表的参数
      clientParams: {
        _limit: 10, // 请求的条数,  一页显示多少个
        _start: 0, // 2,   2,4,6    3     3,6,9  _start*_limit
      },
    };
  },
  created() {
    //获取经纪列表
    this.getAgentList();
  },
  methods: {
    //获取经纪列表
    async getAgentList() {
      const { data } = await getAgentList();
      this.brokerList = data;
      // console.log(97,this.brokerList);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: 0 auto;
  // background-color: skyblue;
  padding: 40px 20px;
}

// .title {
//   margin-bottom: 20px;
// }

.broker_list {
  padding: 20px 0 0 0;
  // display: flex;
  // justify-content: space-evenly;
  // flex-wrap: wrap;
  overflow: hidden;
  .broker_item {
    float: left;
    margin-left: 30px;
    margin-bottom: 30px;
    position: relative;
    width: 30%;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    .broker_img {
      background-image: url(../../assets/images/yue.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      height: 350px;
      // img {
      //   height: 100%;
      // }
    }

    .broker_info {
      border-radius: 0 20px 0 0;
      position: absolute;
      left: 0;
      bottom: 0;
      height: 250px;
      width: 80%;
      background-color: #fff;
      padding: 25px 20px;

      .broker_name {
        margin-bottom: 15px;
      }
    }

    .broker_btn {
      position: absolute;
      right: 0;
      bottom: 0;
      border-radius: 20px 0 0 0;
      width: 40px;
      height: 40px;
      line-height: 40px;
      font-size: 20px;
      text-align: center;
      color: #fff;
      background-color: #e570d1;
    }
    transition: all 0.5s; /*持续时间*/

    &:hover {
      margin-top: 0px; /*和hover的margin-top有对比，原无30,现在0，相当于上移了,30px*/
      box-shadow: 0 0 20px 2px #918f8f; /*盒子阴影*/

      transform: translateY(3px);
    }
  }
}
</style>